<%@ page contentType="text/html; charset=utf-8" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
<%@ taglib prefix="spring" uri="http://www.springframework.org/tags" %>
<%@ taglib prefix="sec" uri="http://www.springframework.org/security/tags" %>
<%@ taglib prefix="primus" tagdir="/WEB-INF/tags" %>
<%@ taglib prefix="fn" tagdir="/WEB-INF/tags/form" %>
<primus:page title="人工派单列表">
    <jsp:attribute name="css">
        <style type="text/css">
            #table .operate {
                min-width: 80px;
            }
        </style>
    </jsp:attribute>
    <jsp:attribute name="script">
        <script type="application/javascript">
            $(function () {
                $("#table").DataTable({
                    "lengthMenu": [[10, 20, 50, -1], [10, 20, 50, "所有"]],
                    "columnDefs": [{"targets": [7], "orderable": false}],
                    "searching": false,
                    "order": [[0, "asc"]]
                });
            });
            $("body").on("click", ".geo-line", function () {
                var id = $(this).data("id");
            })
        </script>
    </jsp:attribute>
    <jsp:body>
        <div class="breadcrumbs ace-save-state" id="breadcrumbs">
            <ul class="breadcrumb">
                <li>
                    <i class="ace-icon fa fa-home home-icon"></i>
                    <a href="welcome.do">
                        首页
                    </a>
                </li>
                <li>
                    <a href="geo/provinces">
                        订单管理
                    </a>
                </li>
                <li class="active">
                    人工派单列表
                </li>
            </ul>
        </div>

        <div class="page-content">

            <div class="row">
                <div class="col-xs-12">
                    <!-- PAGE CONTENT BEGINS -->
                    <div class="row">
                        <div class="col-xs-12">
                            <h3 class="header smaller lighter blue">
                                人工派单改派
                            </h3>
                            <div class="row">
                                <div style="float:right">
                                    <button class="btn btn-white btn-default btn-round" id="closeButton">
                                        <i class="ace-icon fa fa-times red2" style="padding:0;margin:0;float:left;box-sizing:border-box;"></i>
                                        关闭
                                    </button>
                                </div>
                                <h4 class="header smaller lighter blue">
                                    收货信息变更
                                </h4>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label no-padding-right" id="seller" >卖家备注:</label>
                                        <textarea rows="2" cols="175" readonly="true" style="resize: none;"></textarea>
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label no-padding-right">收货人姓名:</label>
                                        <input type="text" class="col-xs-6 col-sm-6 con_inf_name" />
                                    </div>
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label no-padding-right" >收货人邮编:</label>
                                        <input type="text" class="col-xs-6 col-sm-6 con_inf_postcode" />
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label no-padding-right" >收货人邮箱:</label>
                                        <input type="text" class="col-xs-6 col-sm-6 con_inf_email" />
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <div class="col-sm-4">
                                        <label class="col-sm-4 control-label no-padding-right" >收货人固定电话:</label>
                                        <input type="text" class="col-xs-6 col-sm-6 con_inf_tel" />
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row">
                                    <div style="width: 100%">
                                        <div class="col-sm-3">
                                            <label class="col-sm-3 control-label no-padding-right" >收货地址:</label>
                                        </div>
                                        <div class="col-sm-4">
                                            <input name="form-field-radio" type="radio" class="ace">
                                            <span class="lbl con_inf_address"></span>
                                        </div>
                                        <div>
                                            <button class="btn btn-sm btn-warning" id="showAddresButton">
                                                <i class="ace-icon"></i>
                                                <span class="bigger-110 no-text-shadow">添加地址</span>
                                            </button>
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <br>
                                <div class="row" id="showTable">
                                    <div style="width: 100%">

                                        <div class="col-sm-2">
                                            <select class="form-control" id="form-field-select-1">
                                                <option value=""></option>
                                                <option value="AL">Alabama</option>
                                                <option value="AK">Alaska</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select class="form-control" id="form-field-select-2">
                                                <option value=""></option>
                                                <option value="AL">Alabama</option>
                                                <option value="AK">Alaska</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-2">
                                            <select class="form-control" id="form-field-select-3">
                                                <option value=""></option>
                                                <option value="AL">Alabama</option>
                                                <option value="AK">Alaska</option>
                                            </select>
                                        </div>
                                        <div class="col-sm-5">
                                            <input type="text" class="col-xs-6 col-sm-6" placeholder="请输入详细地址" />
                                        </div>
                                    </div>
                                </div>
                                <br>
                                <hr/>
                                <div class="row">
                                    <div style="width: 100%">
                                        <div class="col-sm-4">
                                            <label class="col-sm-4 control-label no-padding-right" >原门店编号</label>
                                            <input type="text" class="col-xs-6 col-sm-6" />
                                        </div>
                                        <div class="col-sm-4">
                                            <label class="col-sm-4 control-label no-padding-right" >原门店名称</label>
                                            <input type="text" class="col-xs-6 col-sm-6" />
                                        </div>
                                    </div>
                                    <br>
                                    <br>
                                    <br>

                                    <div style="width: 100%">
                                        <div class="col-sm-4">
                                            <label class="col-sm-4 control-label no-padding-right" >选择新门店</label>
                                            <input type="text" class="col-xs-6 col-sm-6" />
                                        </div>

                                        <div class="col-sm-4">
                                            <label class="col-sm-4 control-label no-padding-right" >改派原因</label>
                                            <select style="width: 120px" class="form-control" id="form-field-select-4">
                                                <option value="">请选择原因</option>
                                                <option value="AL">库存不足</option>
                                                <option value="AK">人员无法配送</option>
                                            </select>
                                        </div>

                                        <div class="col-sm-2">
                                            <button class="btn btn-xs btn-pink" id="separateBillButton">拆单</button>
                                        </div>
                                    </div>

                                    <br>
                                    <br>
                                    <br>

                                        <%--商品派单信息--%>
                                    <div id="sin_com_inf" class="tab-pane tabe1 tabe2">
                                        <h3>商品拆分信息</h3>
                                        <hr/>
                                        <table id="table_sin_com_inf" class="table table-hover" style="width: 100%;">
                                            <thead>
                                            <tr>
                                                <th>商品编号</th>
                                                <th>商品名称</th>
                                                <th>商品价格</th>
                                                <th>购买数量</th>
                                                <th>门店</th>
                                                <th>操作</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>

                                    <br>
                                    <br>

                                    <div class="tabe2 tabe3">
                                        <button class="btn btn-xs btn-blue">&nbsp;&nbsp;确认&nbsp;&nbsp;</button>
                                    </div>
                                    <br>

                                        <%--仓库信息--%>
                                    <div id="war_inf" class="tab-pane tabe2 tabe3">
                                        <table id="table_war_inf" class="table table-hover" style="width: 100%;">
                                            <thead>
                                            <tr>
                                                <th>选择</th>
                                                <th>门店编号</th>
                                                <th>门店名称</th>
                                                <th>能否发物流</th>
                                                <th>省</th>
                                                <th>市</th>
                                                <th>地址</th>
                                                <th>当前距离(公里)</th>
                                                <th>库存</th>
                                            </tr>
                                            </thead>
                                        </table>
                                    </div>

                                    <div style="float:right">
                                        <button class="btn btn-primary">
                                            提交订单
                                        </button>
                                        <button class="btn btn-primary">
                                            取消
                                        </button>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        </div>

        <script>
            var row,    // 详情数据
                index;  // 行索引

            $(function(){

                GetRequest();

                $("#showTable").hide();     //选择下拉框

                $(".tabe2").hide();         //隐藏拆单列表,仓库列表

                tableSinComInf();           //初始化派单信息列表

                $('#table_sin_com_inf tbody').on('click', 'tr', function () {
                    index = this._DT_RowIndex;
                    if ($(this).hasClass('selected')) {
                        $(this).css({'background-color': '#f9f9f9'})
                        $(this).removeClass('selected');
                    } else {
                        $("#table_sin_com_inf").dataTable().$('tr.selected').css({'background-color': '#f9f9f9'})
                        $("#table_sin_com_inf").dataTable().$('tr.selected').removeClass('selected');
                        $(this).addClass('selected');
                        $(this).css({'background-color': '#00c0ef'})
                    }
                });

//                '省'层级数据
                $.ajax({
                    url:"/dispatch/level2",
                    dataType:"JSON",
                    data:{
                        "level" : 0
                    },
                    success: function (resut) {
                        console.log(resut);
                    }
                });

            });

            // 关闭按钮(跳转派单列表页面)
            $("#closeButton").on("click", function () {
                window.location.href="/manualSingle.do";
            });

            // 添加地址按钮(展示拆单列表,仓库列表)
            $("#showAddresButton").on("click", function () {
                $("#showTable").show();
            });

            // 拆单按钮(展示拆单列表)
            $("#separateBillButton").on("click", function () {
                $(".tabe1").show();
            });

            // 更改按钮(仓库列表)
            function alterButton() {
                $(".tabe3").show();
            }

            // 获取session 存储的值
            function GetRequest() {
                var vc = sessionStorage.getItem('sendOperation'); // => 返回testKey对应的值
                row = JSON.parse(vc)
                console.log(vc);
                con_inf_value(row.consignee);
            }

            // 获取商品派单信息列表
            function tableSinComInf() {
                var obj = tableSinComInfCov();
                var table = $("#table_sin_com_inf").dataTable({
                    searching: false,
                    ordering: false,
                    paging: false, // 禁止分页
                    bDestory: true,
                    bRetrieve: true,
                    data: obj,
                });
            }

            // 商品派单信息 封装
            function tableSinComInfCov() {
                var arr = [];
                var ty = [];

                arr.push(row.code);
                arr.push(row.orderSource);
                arr.push(row.posNo);
                arr.push(row.amount+'&nbsp;&nbsp;&nbsp;'+'<button class=\'btn btn-xs btn-pink\' onclick=\'addLine()\'>十</button>');
                arr.push(row.posNo);
                arr.push("<button class=\"btn btn-xs btn-pink\" onclick='alterButton()'>更改</button>");
                ty.push(arr);
                return ty;
            }

            var ji = 0;
            // 商品派单信息列表添加行
            function addLine() {
                var dt = $("#table_sin_com_inf").dataTable();
                var num = dt.api().rows().count();    // 行号
                ji++;
                var arr = [];
                arr.push(ji);
                arr.push(row.orderSource);
                arr.push(row.posNo);
                arr.push(row.amount+'&nbsp;&nbsp;&nbsp;'+'<button class=\'btn btn-xs btn-pink\' onclick=\'addLine()\'>十</button>'+'&nbsp;&nbsp;&nbsp;'+'<button class=\'btn btn-xs btn-pink\' onclick=\'cutLine('+num+')\'>一</button>');
                arr.push(row.posNo);
                arr.push("<button class=\"btn btn-xs btn-pink\" onclick='alterButton()'>更改</button>");
                dt.api().row.add(arr).draw();

            }

            // 删除行
            function cutLine(num) {
                var dt = $("#table_sin_com_inf").dataTable().api();
                if (num != 0) {
                    if (index == num) {
                        dt.row('.selected').remove().draw(false);
                    } else {
                        layer.msg("选中行与删除行不一致");
                    }
                }
            }

            // 收货人信息赋值
            function con_inf_value(consignee) {
                console.log(consignee)
                if (consignee != null) {
                    $("#seller").val(consignee.modifyRemark);
                    $(".con_inf_name").val(consignee.consigneeName);
//                    $(".con_inf_postcode").val(consignee.consigneeMobile); //暂缺 邮编
//                    $(".con_inf_email").val(consignee.consigneeMobile);    //暂缺 邮箱
                    $(".con_inf_tel").val(consignee.consigneeMobile);
                    $(".con_inf_address").html(consignee.address);
                }
            }

        </script>
    </jsp:body>
</primus:page>